<template>
      <!-- 主体部分 -->
      <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
        <li :class="{completed:item.isDone}" v-for="item in list" :key="item.id">
          <div class="view">
            <input class="toggle" type="checkbox" :checked="item.isDone" @change="handleChange(item.id)"/>
            <label>{{ item.name }}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
        <!-- 动态绑定类名 :class="对象/数组"
        <div :class="{'complete':true, 'demo':false}"></div>
        <div :class="['complete','active']"></div> -->
      </ul>
    </section>
</template>

<script>
export default {
    // props:['list']
    props:{
        list:{
            type:Array,
            // 表示这个list是必须的
            required:true
        }
    },
    computed:{
      isAll:{
        get(){
          return this.list.every(el => el.isDone === true)
        },
        set(val){
          // 如果这么写，改的是父组件传过来的props数据，间接又修改了父组件中的数据了
          // this.list.forEach(el => el.isDone = val)
          // 让父组件自己修改数据
          this.$emit('changeAll', val)
        }
      }
    },
    methods:{
      del(id){
        // emit 通知父组件
        this.$emit('del', id)
      },
      handleChange(id){
        // 子组件 通知父组件，修改数组中某个元素的勾选状态
        this.$emit('changeState', id)
      }
    }
}
// 1. 渲染基本数据
//    1.1 数据放到公共父组件中
//    1.2 父传子，通过属性将数组传给todo-main
//    1.3 子组件，通过props接收，同时props可以校验
//    1.4 子组件 {{ }}  v-model  :class类名绑定

// 2. 删除功能
//    2.1 给todo-main的删除按钮绑定点击事件 @click=del()
          // 点击的时候，根据id，传给父组件，让父组件去删除它的数据
//    2.2 子组件中  this.$emit('自定义事件'， 参数)
//    2.3 父组件   @del=事件处理函数
//      ==> 1. splice(起始位置，删除个数)
//      ==》2. arr.filter()

// 3. 添加功能 
//  3.1 准备一个数据，和输入框input双向绑定，快速获取这个数据
//  3.2 子组件注册键盘keyup事件，回车触发 @keyup.enter
//  3.3 当点击回车的时候，触发一个add事件，通知父组件添加一条数据
        // this.$emit('事件名', 参数)
//  3.4 从父组件App.vue中操作新增数据

// 4. 修改状态 
//  4.1 将v-model 换成 :checked="item.isDone"
//   ==> 单向数据流原则 v-model不要和父组件中的数据进行绑定
//  4.2 监听input的change事件，@change 
//   ==> 当复选框改变了，修改父组件中的数据 
//  4.3 通过子传父 this.$emit(事件，参数) 
//  4.4 父组件监听自定义的事件，做出响应，修改数据



// 双向数据绑定 v-model
// 1. 数据变化  ==> 视图自动更新
//  data中 item.isDone 变化了 ，视图就更新了
// 2. 视图变化了  ==> 数据更新 
//  勾选了页面上的复选框之后，数据也自动发生变化 


// 单向数据流 : 数据只能从父组件传到子组件，子组件不能直接修改父组件中的数据
// 视图变化时，影响了父组件的数据 ==> 存在问题

// ===> 结论： v-model 永远不要和父组件传过来的props的数据发生双向绑定



// 以下内容重要 
// v-model 是一个语法糖 

// 1. 数据变化  ==> 视图更新    input框的type如果是checkbox    :checked
//    这里的数据变化，app.vue中的data的数据变化  
// 2. 视图变化  ==> 数据更新    让父组件自己去修改数据，通知父组件  @change 事件 
//    视图变化，指的是我们去勾选了复选框，改变了页面的样子


// v-model 根据 input的不同类型，设置不同的属性，监听不同的事件 
// 1. type="checkbox"   v-model        :checked + @change 
// 2. type="text"文本框  
//                      v-model        :value + @input 
//                      v-model.lazy   :value + @change 




</script>

<style>

</style>